<template>
	<!-- #ifdef MP -->
	<view class="nav-bar">
		<navbar title="导航栏标题" back>
			<template #left>
				<text>返回</text>
			</template>
		</navbar>
	</view>
	<!-- #endif -->
	<view class="container">
		<view class="demo uni-mb-10">
			<text style="line-height: 2">uni-app 小程序开箱框架</text>
		</view>
		<view class="intro uni-secondary-color uni-mb-10">
			<text>1.集成Vuex(支持 vue2/vue3)</text>
			<text>2.集成luch-request API集中管理及请求响应拦截</text>
			<text>3.集成分包机制</text>
			<text>4.NPM模块 luch-request / vuex-persistedstate</text>
			<text>5.可以不使用UNI-UI框架，裸奔手写。移除相关的UNI套件引用样式即可</text>
		</view>
		<text class="uni-primary" style="line-height: 1.8">基础功能样例：</text>
		<button type="primary" size="mini" class="uni-mb-4">设置Vuex缓存</button>
		<button type="warn" @click="toSubpage" size="mini">跳转分包页</button>
		
		<!-- tabbar -->
		<tab-bar></tab-bar>
	</view>
</template>

<script>
// 引入API列表
import * as apiList from '@/common/request/api/module.api.js';
export default {
	data() {
		return {};
	},
	methods: {
		setStores() {
			// 设置 user Vuex
			uni.$stores.commit('user/setToken', 'userTOKEN');
			setTimeout(() => {
				console.log(uni.$stores.state);
			}, 2000);
		},
		toSubpage() {
			uni.navigateTo({
				url: '/pages_subpackages/articles/articles'
			});
		}
	},
	onLoad() {
		// GET请求及传参
		apiList
			.isGet()
			.init(
				{
					platform: 'miniapp'
				},
				{
					custom: {
						loading: false // 不要加载loading-toast
					}
				}
			)
			// 成功请求时
			.then((res) => {
				console.log('success-get', res);
			})
			// 请求发生错误时
			.catch((err) => {
				console.log('err-get', err);
			});

		// POST请求
		apiList
			.isPost()
			.editProfile({
				nickname: '昵称修改'
			})
			.then((res) => {
				console.log('success-post', res);
			})
			.catch((err) => {
				console.log('err-post', err);
			});
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.demo {
	border-bottom: 2px solid gray;
	text-align: center;
	font-size: 52rpx;
	font-weight: lighter;
}

.intro {
	@include flexDirect(column);
}
</style>
